<!-- CSS分为：
 行内样式——style属性表明，下面的代码就是
 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <style>
        .header {
            border: solid 5px black;
            background-color: red;
            padding: 10px 0px;
            text-align: center;font-size: 20px;
        }
        .section {
            border: solid 5px black;
            display: flex;
            height: 300px;
        }
        .footer {
            border: solid 5px black;
            background-color: yellow;
            padding: 10px 0px;
            text-align: center;font-size: 20px;
        }
        .left-column {
            flex: 1;
            border: solid 5px black;
            background-color: blue;
            padding: 20px 10px;
            text-align: center;font-size: 20px;
        }
        .right-column {
            flex: 2;
            border: solid 5px black;
            background-color: green;
            padding: 20px 10px;
            text-align: center;font-size: 20px;
        }
        .medium-column {
            flex: 1;
            border: solid 5px black;
            background-color: rebeccapurple;
            padding: 20px 10px;
            text-align: center;font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>上</h1>
    </div>
    <div class="section">
        <div class="left-column">
            <h1>A</h1>
        </div>
        <div class="right-column">
            <h1>B</h1>
        </div>
        <div class="medium-column">
            <h1>C</h1>
        </div>
    </div>
    <div class="footer">
        <h1>下</h1>
    </div>
</body>
</html>
<!-- 内部样式：
 <div style="background-color: red; padding: 10px 0px; text-align: center;" class="header">
 </div>
-->
<!-- 外部样式:
 单独分出一个文件 -->
<!-- 
"style.css":
.left-column {
    flex: 1;
    background-color: blue;}

".html":
<style>
    <link rel="stylesheet" type="text/css" href="style.css">
</style>
-->

<!-- 
选择器
.left-column {}
里面的用的类选择器.class
另外还有id选择器#id，代码中应该有<xxx id="id">，然后在css中用#id{}来定义样式。js常用
也可以直接用标签名来定义样式，如div{}，这样所有div标签都会被定义样式。前面没有.也没有#，就是标签名。
-->

<!--
行级元素：如span，img，input，默认宽度和高度是内联元素的100%，可以设置宽高，padding和margin，不能设置背景色，不能设置字体大小，颜色等。
块级元素：如p，div，一次占用多行，默认宽度是父元素的100%，可以设置宽高，padding和margin，可以设置背景色，可以设置字体大小，颜色等。
本质在于属性display，行级元素为inline，块级元素为block。
还有一种东西叫inline-block，可以设置宽高，padding和margin，可以设置背景色，可以设置字体大小，颜色等。
-->

<!--
div:nth-child(1):{}
用于选择同名标签的第几个
-->

<!--
float调整位置
position调整定位:absolute/relative
absolute相对父元素或者html
relative相对正常的位置
-->


